<template>
  <div>
    <!--轮播图-->
    <div class="swiper-box">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item class="swipe-item">
          <img src="http://image.chwlsq.com/1/config/1711051729457206142.png" alt="">
        </van-swipe-item>
        <van-swipe-item class="swipe-item">
          <img src="http://image.chwlsq.com/1/config/1804101326527978929.png" alt="">
        </van-swipe-item>
        <van-swipe-item class="swipe-item">
          <img src="http://image.chwlsq.com/1/config/1710262043120690694.png" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <div>
      <van-notice-bar
        text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
        left-icon="volume-o"
      />
    </div>

    <div class="info-tip flex flex-align-center">
      <div class="tip-img flex flex-pack-center">
        <img src="/static/images/index/notice.png" alt="" />
      </div>
      <div class="tip-swipe">
        <van-swipe :autoplay="3000" vertical :show-indicators="false">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="flex flex-v entry-item-box">
      <van-swipe indicator-color="transparent">
        <van-swipe-item>
          <div class="flex flex-pack-center flex-align-center item-list">
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201144118593716.png" alt="" class="item-img"/>
              <span class="item-tip">招聘求职</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201142220514442.png" alt="" class="item-img"/>
              <span class="item-tip">房产信息</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201142348351382.png" alt="" class="item-img"/>
              <span class="item-tip">二手闲置</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201142460582254.png" alt="" class="item-img"/>
              <span class="item-tip">车辆买卖</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201142589141878.png" alt="" class="item-img"/>
              <span class="item-tip">宠物服务</span>
            </a>
          </div>
          <div class="flex flex-pack-center flex-align-center item-list">
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201143207646362.png" alt="" class="item-img"/>
              <span class="item-tip">票务/优惠</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201143332953908.png" alt="" class="item-img"/>
              <span class="item-tip">同城活动</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201143539817320.png" alt="" class="item-img"/>
              <span class="item-tip">技能交换</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201144247456086.png" alt="" class="item-img"/>
              <span class="item-tip">生活服务</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201144414903922.png" alt="" class="item-img"/>
              <span class="item-tip">维修服务</span>
            </a>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="flex flex-pack-center flex-align-center item-list">
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201144533609652.png" alt="" class="item-img"/>
              <span class="item-tip">装修建材</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201145408344678.png" alt="" class="item-img"/>
              <span class="item-tip">车辆服务</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201145559717678.png" alt="" class="item-img"/>
              <span class="item-tip">婚纱摄影</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201146065034222.png" alt="" class="item-img"/>
              <span class="item-tip">休闲娱乐</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201146150281636.png" alt="" class="item-img"/>
              <span class="item-tip">商务娱乐</span>
            </a>
          </div>
          <div class="flex item-list">
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201148009589890.png" alt="" class="item-img"/>
              <span class="item-tip">教育培训</span>
            </a>
            <a class="flex-1 flex-align-center flex flex-pack-center flex-v">
              <img src="/static/images/index/1703201143332953908.png" alt="" class="item-img"/>
              <span class="item-tip">美食</span>
            </a>
          </div>

        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="hot-item-box">
      <van-cell title="热门商家" value="全部" is-link to="test2" />
      <div class="van-hairline--top"></div>
      <div class="hot-item">
        <ul class="item flex">
          <li class="item-li">
            <a href="" class="flex flex-v flex-align-center">
              <img :src="img1" alt="" />
              <span class="s_name">黑猫微圈</span>
            </a>
          </li>
          <li class="item-li">
            <a href="" class="flex flex-v flex-align-center">
              <img :src="img2" alt="" />
              <span class="s_name">黑猫微圈</span>
            </a>
          </li>
          <li class="item-li">
            <a href="" class="flex flex-v flex-align-center">
              <img :src="img3" alt="" />
              <span class="s_name">黑猫微圈</span>
            </a>
          </li>
          <li class="item-li">
            <a href="" class="flex flex-v flex-align-center">
              <img :src="img4" alt="" />
              <span class="s_name">黑猫微圈</span>
            </a>
          </li>
          <li class="item-li">
            <a href="" class="flex flex-v flex-align-center">
              <img :src="img1" alt="" />
              <span class="s_name">黑猫微圈</span>
            </a>
          </li>
          <li class="item-li">
            <a href="" class="flex flex-v flex-align-center">
              <img :src="img2" alt="" />
              <span class="s_name">黑猫微圈</span>
            </a>
          </li>
          <li class="item-li">
            <a href="" class="flex flex-v flex-align-center">
              <img :src="img3" alt="" />
              <span class="s_name">黑猫微圈</span>
            </a>
          </li>
          <li class="item-li flex flex-align-center flex-pack-center">
            <a href="tel:400-0000-000">
              <span class="want">我要入驻>> </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-item-box">
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in tab" :key="index" :title="item.title"></van-tab>
      </van-tabs>
      <detail-info></detail-info>
    </div>

  </div>
</template>

<script>
import {Swipe, SwipeItem, NoticeBar, Tab, Tabs, Cell, CellGroup} from 'vant'
import {Image} from '../../config/imgs'
import DetailInfo from '../../components/DetailInfo'

export default {
  name: 'test1',
  data () {
    return {
      title: '标题一',
      active: 2,
      img1: Image.img1,
      img2: Image.img2,
      img3: Image.img3,
      img4: Image.img4,
      tab: [{
        title: '热门推荐',
        path: ''
      },
      {
        title: '美食',
        path: ''
      },
      {
        title: '车辆买卖',
        path: ''
      },
      {
        title: '同城活动',
        path: ''
      },
      {
        title: 'test1',
        path: ''
      },
      {
        title: 'test2',
        path: ''
      }]
    }
  },
  components: {
    DetailInfo,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [NoticeBar.name]: NoticeBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  }
}
</script>

<style scoped lang="less">
  .swiper-box {
    width: 100%;
    height: 150px;
    .van-swipe {
      height: 100%;
      .van-swipe-item {
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .entry-item-box {
    padding-top: 15px;
    background-color: @white;
    margin-bottom: 15px;
    .item-list {
      a {
        .item-img {
          width: 40px;
          height: 40px;
        }
        .item-tip {
          display: inline-block;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #6F6F6F;
        }
      }
    }
  }
  .tab-item-box {
    background-color: @white;
    margin-top: 15px;
    margin-bottom: 15px;
    border-top: 10px solid @white-gray;
  }

  // 全部商品
  .hot-item-box{
    padding-left: 15px;
    padding-right: 15px;
    background-color: @white;
    .van-cell {
      padding-right: 0!important;
      padding-left: 0!important;
    }
    .hot-item{
      padding: 15px 0;
      ul {
        overflow-x: auto;
        li.item-li{
          margin-right: 8px;
          width: 80px;
          a{
            width: 80px;
            img{
              width: 100%;
              height: 80px;
              border-radius: 5px;
            }
            span.s_name{
              display: inline-block;
              height: 30px;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
              float: left;
            }
            span.want{
              color: #fa7e40;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  // 滚动广告
  .info-tip{
    padding: 5px 0;
    width: 100%;
    border-top: 10px solid @white-gray;
    border-bottom: 10px solid @white-gray;
    position: relative;
    background-color: #fff;
    .tip-img{
      width: 17%;
      height: 30px;
      img{
        width: 30px;
        height: 30px;
      }
    }
    .tip-swipe{
      height: 40px;
      width: 83%;
      .van-swipe {
        height: 100%;
      }
    }
  }
</style>
